<template>
  <div class="jaguar-view">
    <div class="jaguar-search">
      <el-form :inline="true" :model="searchForm" @submit.prevent>
        <search-input
          label="角色名称"
          v-model="searchForm.fuzzyRoleName"
          :search="getData"
        />
        <search-select
          label="是否启用"
          v-model="searchForm.roleEnable"
          :options="isEnableOptions"
          :search="getData"
        />

        <el-form-item>
          <search-button :search="getData" />
          <reset-button :search-form="searchForm" :search="getData" />
        </el-form-item>
      </el-form>
    </div>

    <div class="jaguar-control">
      <add-button @click="handleCreate" />
    </div>

    <Card>
      <template #content>
        <DataTable
          ref="table"
          :value="tableData"
          stripedRows
          :loading="loading"
        >
          <Column field="roleName" header="角色名称" />
          <Column header="角色用户">
            <template #body="scope">
              <Tag v-for="user in scope.data.users" :key="user.id">
                {{ user.userAccount }}
              </Tag>
            </template>
          </Column>

          <Column field="roleEnable" header="角色是否启用">
            <template #body="scope">
              <ToggleSwitch v-model="scope.data.roleEnable" disabled />
            </template>
          </Column>

          <Column header="操作">
            <template #body="scope">
              <view-button @click="handleView(scope.data)" />
              <edit-button @click="handleEdit(scope.data)" />
              <delete-button
                v-if="!scope.data.roleBuiltIn"
                @confirm="handleDelete(scope.data)"
              />
            </template>
          </Column>
        </DataTable>
        <table-page :page="page" :search="getData" />
      </template>
    </Card>

    <Edit :dialog="dialog" @success="getData()" />
  </div>
</template>
<script>
import { fetchList, del } from '@/api/upms/role'
import Edit from './Edit'
import { isEnable } from '@/components/dictionary/index.js'

export default {
  name: 'Role',
  data() {
    return {
      loading: false,
      tableData: [],
      searchForm: {},
      page: {
        total: 0,
        current: 1,
        size: 10,
      },
      dialog: {
        entity: null,
        operation: null,
        visible: false,
      },
      isEnableOptions: isEnable,
    }
  },
  components: {
    Edit,
  },
  created() {
    this.getData()
  },
  methods: {
    getData(current, size) {
      if (current) this.page.current = current
      if (size) this.page.size = size

      this.loading = true
      fetchList(
        Object.assign(
          {
            current: this.page.current,
            size: this.page.size,
          },
          this.searchForm
        )
      )
        .then((res) => {
          this.tableData = res.data.data.records
          this.page.total = res.data.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleCreate() {
      this.dialog.entity = null
      this.dialog.operation = 1
      this.dialog.visible = true
    },
    handleEdit(row) {
      this.dialog.entity = row
      this.dialog.operation = 2
      this.dialog.visible = true
    },
    handleView(row) {
      this.dialog.entity = row
      this.dialog.operation = 3
      this.dialog.visible = true
    },
    handleDelete(row) {
      del(row.id).then(() => {
        this.$message.success('删除成功')
        this.getData()
      })
    },
  },
}
</script>
